<!-- 
购物车页面
 * @Author: zuobufan
 * @Location: 中杰科技研发中心
 * @LastEditors: zuobufan
 * @CreateEditTime: 2021-09-29 11:18:00
 -->
<template>
  <div class="details">
    <!--轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" width="100%" alt style="display: block">
      </van-swipe-item>
    </van-swipe>
    <!-- 提示组件 -->
    <Tips/>
    <!-- 商品信息  -->
    <div class="goods-info">
      <h3>{{info.name}}</h3>
      <h4>{{info.goods_brief}}</h4>
      <p>{{info.retail_price | RMBformat}}</p>
    </div>
    <!-- 展示弹出框 -->
    <van-cell class="mycell" is-link @click="showPopup">展示弹出层</van-cell>
    <!-- 商品参数 -->
    <div class="goods-params">
      <h2>商品参数</h2>
      <ul>
        <li v-for="item in attribute" :key="item.id">
          <span>{{item.name}}</span>
          <p>{{item.value}}</p>
        </li>
      </ul>
    </div>
    <!-- 图片 -->
    <div class="goods-desc" v-html="info.goods_desc"></div>
    <!-- 常见问题 -->
    <div class="title">
      <div class="line"></div>
      <div class="text">常见问题</div>
    </div>
    <!-- issue -->
    <div class="issue">
      <ul>
        <li v-for="item in issue" :key="item.id">
          <h3>{{item.question}}</h3>
          <p>{{item.answer}}</p>
        </li>
      </ul>
    </div>
    <!--相关产品-->
    <div class="title">
      <div class="line"></div>
      <div class="text">相关产品</div>
    </div>
    <div class="DetailsProductList">
      <Products :goodsList="goodsList"/>
    </div>
    <!--popup-->
    <van-popup v-model="Popupshow" position="bottom" :style="{ height: '32%' }">
      <div class="sku">
        <div class="top">
          <div class="top_l">
            <img :src="info.list_pic_url" alt>
          </div>
          <div class="top_r">
            <h3>价格：{{info.retail_price | RMBformat}}</h3>
            <h4>库存：{{info.goods_number}}</h4>
          </div>
        </div>
        <div class="bottom">
          <p>数量:</p>
          <van-stepper v-model="stepperNum" min="1" :max="info.goods_number" integer/>
        </div>
      </div>
    </van-popup>
    <!--商品导航-->
    <van-goods-action>
      <van-goods-action-icon
        :icon="isCollected ? 'star' : 'star-o'"
        :text="isCollected ? '已收藏' : '未收藏'"
        :color="isCollected ? '#f01526' : '#666'"
        @click="hdClickCollect"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="token ? goodsCount : 0"
        @click="gotoCart"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCart"/>
      <van-goods-action-button type="danger" text="立即购买"/>
    </van-goods-action>
  </div>
</template>

<script>
import {
  GetGoodsDetailsData,
  GetAboutProductsData,
  CartGoodsNumApi,
  CartAddApi
} from "@/request/api";
import Tips from "@/components/Tips";
import Products from "@/components/Products";
import { setTimeout } from "timers";
export default {
  components: {
    Tips,
    Products
  },
  data() {
    return {
      token: localStorage.getItem("token"),
      Popupshow: false,
      isCollected: false, //是否收藏
      goodsCount: 0, //购物车所有商品总数量
      stepperNum: 1, //步近器的值
      gallery: [], //轮播图
      info: [], //商品信息
      attribute: [], //商品参数
      issue: [], //常见问题
      goodsList: [], //相关产品
      ProductList: []
    };
  },
  async created() {
    // console.log(this.$route.query.id);
    // 请求商品数据
    await GetGoodsDetailsData({
      id: this.$route.query.id
    }).then(res => {
      console.log(res);
      if (res.errno == 0) {
        let { gallery, info, attribute, issue, productList } = res.data;
        this.gallery = gallery;
        this.info = info;
        this.attribute = attribute;
        this.issue = issue;
        // 加入购物车接口 产品id，来自productList的第一个数组项中的id
        this.ProductList = productList;
      }
    });

    // 请求相关产品
    await GetAboutProductsData({
      id: this.$route.query.id
    }).then(res => {
      console.log(res);
      if (res.errno == 0) {
        this.goodsList = res.data.goodsList;
      }
    });
    // 请求购物车产品数量
    await CartGoodsNumApi().then(res => {
      console.log(res);
      if (res.errno == 0) {
        this.goodsCount = res.data.cartTotal.goodsCount; //购物车数量
      }
    });
  },
  // 监听路由变化
  watch: {
    "$route.query.id": {
      handler(newval, oldval) {
        if (newval != oldval) {
          this.$router.go(0);
        }
      }
    }
  },
  methods: {
    showPopup() {
      this.Popupshow = true;
    },
    hdClickCollect() {
      // 判断有没有登录，如果没有登录就跳转到登录页 （/user）
      let token = localStorage.getItem("token");
      if (!token) {
         Vue.prototype.$toast.loading({
          message: "请先登录",
          forbidClick: true
        });
        setTimeout(() => {
          this.$router.push("/user");
        }, 500);
      } else {
        this.isCollected = !this.isCollected;
      }
    },
    addToCart() {
      // 判断popup是否为显示状态
      if (this.Popupshow) {
        CartAddApi({
          goodsId: this.$route.query.id,
          productId: this.ProductList[0].id, //加入购物车接口 产品id，来自productList的第一个数组项中的id
          number: this.stepperNum
        }).then(res => {
          console.log(res);

          if (res.errno == 0) {
            let { cartTotal } = res.data;
            this.cartTotal = cartTotal;
            this.goodsCount = this.cartTotal.goodsCount; //重新渲染购物车数量
            this.Popupshow = false; //关闭遮罩层
          }
        });
      } else {
        // 没打开点击就是打开
        this.Popupshow = true;
      }
    },
    gotoCart() {
      this.$router.push("/cart");
    }
  }
};
</script>

<style scoped lang="less">
* {
  font-size: 0.14rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.details {
  background-color: #fff;
  .goods-info {
    text-align: center;
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: 0.2rem;
      font-weight: 500;
      margin-bottom: 0.2rem;
    }
    h4 {
      font-size: 0.14rem;
      margin-bottom: 0.2rem;
    }
    p {
      color: #8b0000;
    }
  }

  .mycell {
    border-bottom: 20px solid #eee;
  }

  .goods-params {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    h2 {
      font-size: 20px;
      line-height: 40px;
    }
    ul {
      li {
        background-color: #efefef;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        span {
          color: #999;
          width: 20%;
          margin-right: 5px;
          text-align: right;
        }
        p {
          flex: 1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }

  /* less和sass -预编译语言 -deep深度修改样式 */
  /deep/ .goods-desc {
    p {
      margin: 0;
      img {
        display: block;
        width: 100%;
      }
    }
  }

  .title {
    background-color: #fff;
    position: relative;
    height: 40px;
    .line {
      width: 50%;
      height: 2px;
      background-color: #ccc;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
    }
    .text {
      width: 30%;
      height: 40px;
      line-height: 40px;
      font-size: 0.18rem;
      background-color: #fff;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      text-align: center;
    }
  }

  .issue {
    background-color: #fff;

    ul {
      margin-bottom: 20px;

      li {
        padding: 0 20px;

        h3 {
          padding: 12px 0;
          position: relative;
          /* 小圆点 */

          &::before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: darkred;
            position: absolute;
            left: -10px;
            top: 50%;
            margin-top: -2px;
          }
        }

        p {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  .van-goods-action {
    z-index: 9999;
  }

  .sku {
    padding: 20px;

    .top {
      display: flex;
      justify-content: space-between;

      img {
        width: 100px;
        margin-right: 10px;
      }

      .top_r {
        flex: 1;
        display: flex;
        /* 竖 响应布局*/
        flex-direction: column;
        justify-content: space-around;
      }
    }

    .bottom {
      .van-stepper {
        padding: 10px;
      }
    }
  }
}
</style>
